<template>
	<view class="m-girl-develop">
		<view class="right-btn flex-column-start-start" v-if="showUpdateBtn">
			<!-- :class="{'not-use-btn':!(item.showScene.includes(useType))}" :class="{'not-use-btn':!(item.showScene.includes(useType))}" -->
			<view class="btn-item" v-for="(item,index) in rightBtnList" :key="index" @click="handleBtnClick(item.type)">
				<view class="icon">
					<image class="icon-img" :src="item.icon" mode=""></image>
				</view>
				<!-- <view class="btn-name">{{item.name}}</view> -->
			</view>

		</view>

		<view class="girl-name-start" @click="handleAttrShow('base')">
			<view class="girl-name">
				<!-- 之后直接拿storyName -->
				<view class="top-name">{{roleName}}</view>
				<view class="center-split-icon" v-if="clothesName">·</view>

				<view class="bottom-clothes-name" v-if="clothesName">{{clothesName}}</view>

				<view class="r-level"
					:class="{'r-sr-sp':(RarityLevel==4||RarityLevel==2),'r-ssr':RarityLevel==3,'r-r':RarityLevel==1}">
					<image class="r-level-icon" :src="RarityLevelSrc" mode="aspectFill"></image>
				</view>

				<view class="icon-box">魅</view>
				<view class="choosed-box">已上阵</view>
			</view>
			<view class="girl-start flex-column-start-center">
				<view class="start-item" v-for="item in 3">
					<image class="start-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>



		<view class="power-box flex-row-center-center" v-if="showUpdateBtn">
			<view class="power-inner">
				<view class="left-tip">
					<view class="one-tip">舞</view>
					<view class="two-tip">力</view>
				</view>
				<view class="right-num">244523</view>

				<view class="line-box top-line"></view>
				<view class="line-box bottom-line"></view>
			</view>

		</view>

		<view class="prop-list">
			<view class="prop-list-item flex-row-center-center" :class="{'good-after-before':item.image,'green-good': item.RarityLevel == 1,
                      'orange-good': item.RarityLevel == 2,
                      'blue-good': item.RarityLevel == 3,
                      'purple-good': item.RarityLevel == 4}" v-for="(item,index) in nowPropList" :key="index"
				@click="handleAttrShow('updateProp',item,index)">
				<view class="prop-add-icon flex-row-center-center" v-if="!item.image">
					<image class="cover-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
						mode="aspectFill"></image>
				</view>

				<view class="prop-content" v-if="item.image">
					<image class="cover-img" :src="item.image" mode="aspectFill"></image>
					<view class="prop-info flex-row-start-center">
						<view class="prop-start-list flex-row-start-center">
							<view class="porp-start-item flex-row-center-center" v-for="sitem in item.starts">
								<image class="cover-img porp-start-item-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="porp-level flex-row-end-center">{{item.level}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="attr-update-btn flex-row-start-center" v-if="showUpdateBtn">
			<view class="btn-content flex-column-center-center" @click="handleUpdate('up')">
				<view class="btn-top-name">{{updateText}}</view>

			</view>
			<view class="btn-content flex-column-center-center two" @click="handleUpdate('adv')">
				<view class="btn-top-name">进 阶</view>

			</view>

		</view>

		<view class="bg-box">
			<image class="bg-img" :src="image" mode="aspectFill"></image>
		</view>
		<!-- 
		<mClothesChoose ref="mClothesChoose" :storyId="storyId" @buy="buy" @dressUp="dressUp"
			@close="changeClothesClose" @show="changeClothesShow" @seekTime="seekTime" @emitName="emitName"
			@clothesChange="clothesChange">
		</mClothesChoose> -->
		<mModal ref="mModal" @wearProp="handleWearProp" @removeProp="handleRemoveProp"></mModal>
		<devPop ref="devPop" @btnNameChange="btnNameChange" @close="changeClothesClose" @show="changeClothesShow">
		</devPop>


	</view>
</template>

<script>
	// import mClothesChoose from '@/components/m-clothes-choose/index.vue'
	import mModal from "./modal.vue"
	import devPop from "./develop-pop.vue"
	export default {
		components: {
			mModal,
			devPop,
			// mClothesChoose
		},
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			storyId: {
				type: String,
				default: ""
			},
			paramsData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			useType: {
				type: String,
				default: "girl", // girl secretary staff
			}

		},
		mounted() {
			// this.getProps()
		},
		watch: {
			paramsData: {
				handler(newVal, oldVal) {
					this.RarityLevel = !newVal.RarityLevel ? this.RarityLevel : newVal.RarityLevel
					this.image = !newVal.image ? this.image : newVal.image
					this.name = !newVal.name ? this.name : newVal.name

					if (this.name.includes('·')) {
						this.roleName = this.name.split('·')[0]
						this.clothesName = this.name.split('·')[1]
					} else if (this.name.includes('.')) {
						this.roleName = this.name.split('.')[0]
						this.clothesName = this.name.split('.')[1]
					} else {
						this.roleName = this.name
						this.clothesName = ""
					}
				},
				deep: true,
				immediate: true
			},
			useType: {
				handler(newVal, oldVal) {
					this.rightBtnList = this.rightBtnList.filter((item, index) => {
						return item.showScene.includes(newVal)
					})

				},
				deep: true,
				immediate: true
			}

		},
		computed: {
			RarityLevelSrc() {
				let src = ""
				if (this.RarityLevel == 1) {
					src =
						"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/93cd8b6a4c1949a0b6d2d3d1c000385c.png"

				} else if (this.RarityLevel == 2) {
					src =
						"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/758444cd41804eae8906866c80f5efd5.png"

				} else if (this.RarityLevel == 3) {
					src =
						"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1ee25285760a4ca1b3162331362f01ba.png"

				} else if (this.RarityLevel == 4) {
					src =
						"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/247f5d1c0a5247a487336c52f34a1a76.png"
				}

				return src
			}

		},
		data() {
			return {
				nowPropList: [{

						name: "星愿",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e583cc7e76d74f8fa1155dc1ddc2a5ac.png",
						RarityLevel: 4,
						starts: 3,
						level: 30
					},
					{
						name: "流萤",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9fe056b27df44b03a156532100eab8ea.png",
						RarityLevel: 3,
						starts: 2,
						level: 35
					},
					{
						name: "雨落之屏",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/52a8929435334703a976df3284094614.png",
						RarityLevel: 2,
						starts: 1,
						level: 40
					}, {
						name: "纸刃",
						image: "",
						RarityLevel: 1,
						starts: 1,
						level: 0
					},


				],
				image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
				RarityLevel: 2,
				updateText: '升 级',
				jumpStoryId: '',
				attrList: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68c0d88b4b2b45079b6c02aa6f6da69b.png",
						number: 0,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4b9325a0b22349f4a6017cc146876582.png",
						number: 0,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0ede5411a3594d98bc57fb160989bed9.png",
						number: 0,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/aa7d82c71f8246cf9f4573cb7902ea18.png",
						number: 0,
					},
				],
				name: "秘书·性感泳装",
				roleName: "秘书",
				clothesName: "性感泳装",
				showUpdateBtn: true,
				rightBtnList: [
					// {
					// 	name: "属性",
					// 	icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b57aefa75c44412cbe03f9822eb4605f.png",
					// 	type: "skill"
					// },
					{
						name: "剧情",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bafade5139894b449986fcef26533a78.png",
						type: "story",
						showScene: ['girl']
					},
					{
						name: "礼物",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b49ff47bf9fa4d969a0e458efbd54a0f.png",
						type: "gift",
						showScene: ['secretary']
					},
					{
						name: "朋友圈",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5d19491ea0774cd2affd83addca31d1c.png",
						type: "friends",
						showScene: ['secretary']
					},


				]
			}
		},
		methods: {
			handleRemoveProp(data) {
				this.$set(this.nowPropList, data.index, null)
			},
			handleWearProp(data) {
				this.$set(this.nowPropList, data.index, data.data)
			},
			handleAttrShow(type, data, index) {
				if (this.$refs.mModal) {
					if (type == 'updateProp') {
						if (data && data.image) {
							this.$refs.mModal.open({
								type,
								data,
								index
							})
						} else {
							// 添加装备
							this.$refs.mModal.open({
								type: "getProp",
								data,
								index
							})
						}

					} else {
						this.$refs.mModal.open({
							type,
							data,
							index
						})
					}

				}

			},
			btnNameChange(e) {
				if (e) {
					this.updateText = e
				}
			},
			handleUpdate(type) {
				if (this.$refs.devPop) {
					this.$refs.devPop.open(type)
				}
			},
			getProps() {
				let paramsJson = this.paramsJson
				this.jumpStoryId = paramsJson.jumpStoryId && paramsJson.jumpStoryId.default ? paramsJson
					.jumpStoryId.default :
					this
					.jumpStoryId
			},
			clothesChange(e) {
				this.roleName = e.roleName
				this.clothesName = e.name
				console.log("能否获取到", this.roleName, this.clothesName);
			},
			emitName(e) {
				// this.roleName = e
			},
			seekTime(e) {
				this.$emit("getGameResult", Number(e))
			},
			changeClothesShow() {
				this.showUpdateBtn = false
			},
			changeClothesClose() {
				this.showUpdateBtn = true
			},
			buy(e) {

			},
			dressUp(e) {
				console.log("装扮按钮点击返回");
			},
			handleBtnClick(type) {
				switch (type) {
					case 'changeClothes':
						if (this.$refs.mClothesChoose) {
							this.$refs.mClothesChoose.open()
						}
						break;
					case 'skill':
						if (this.$refs.mModal) {
							this.$refs.mModal.open()
						}
						break;
					case 'story':
						if (this.jumpStoryId) {
							this.$emit("getGameResult", this.jumpStoryId)
						}
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-girl-develop {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 99999999;

		.bg-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			z-index: 1;

			.bg-img {
				width: 100%;
				height: 100%;
			}
		}

		.pkVideo {
			position: absolute;
			width: 100vw;
			height: 100vh;
			object-fit: cover;
			z-index: 1;
		}

		.prop-list {
			position: absolute;
			right: 30rpx;
			top: 220rpx;
			width: 90rpx;
			z-index: 9;

			.prop-list-item {
				position: relative;
				width: 90rpx;
				height: 90rpx;
				background-color: rgba(255, 255, 255, 0.3);
				box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
				margin-bottom: 20rpx;

				.prop-add-icon {
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					padding: 30rpx;
				}

				.prop-content {
					position: relative;
					width: 100%;
					height: 100%;

					.prop-info {
						position: absolute;
						left: 0rpx;
						bottom: 2rpx;
						width: 100%;
						z-index: 10;


						.prop-start-list {
							width: 60rpx;
							margin-left: 5rpx;

							.porp-start-item {
								width: 16rpx;
								height: 16rpx;

								.porp-start-item-img {
									transform: rotate(30deg);
								}
							}

						}

						.porp-level {
							flex: 1;
							font-size: 12rpx;
							line-height: 12rpx;
							color: #fff;
							margin-right: 5rpx;


						}
					}
				}
			}

		}

		.right-btn {
			position: absolute;
			left: 30rpx;
			top: 620rpx;
			width: 60rpx;

			z-index: 9;

			.btn-item {
				position: relative;
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 15rpx;
				// background-color: pink;
				pointer-events: fill;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, .1);
				// box-shadow: inset 0rpx 0rpx 10rpx rgba(255, 255, 255, .6);
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 5rpx;

				.icon {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon-img {
						width: 100%;
						height: 100%;
					}
				}

				.btn-name {
					width: 100%;
					height: 30rpx;
					font-size: 20rpx;
					text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .5);
					position: absolute;
					left: 0;
					bottom: -28rpx;
					text-align: center;
					color: #fff;
					line-height: 30rpx;
				}
			}

			.not-use-btn {
				opacity: 0;
				pointer-events: none;
			}
		}

		.develop-attr {
			position: absolute;


			top: 250rpx;
			left: 40rpx;
			width: 180rpx;
			z-index: 9;

			.attr-content {
				.top-name {
					overflow: hidden;
					width: 100%;
					background-color: rgba(75, 78, 111, .8);
					box-sizing: border-box;
					padding: 0 10rpx;
					margin-top: 5rpx;

					.top-name-tip {
						font-size: 24rpx;
						width: 100%;
						height: 35rpx;
						line-height: 35rpx;
						font-weight: 700;
						color: #fff;
						text-shadow: 0rpx 0rpx 1rpx #000;
						text-align: center;
						margin-bottom: 5rpx;
						margin-top: 5rpx;
					}

					.bottom-level-name {
						width: 100%;
						height: 30rpx;
						background-color: #f0ecfb;
						border-radius: 5rpx;
						font-size: 20rpx;
						color: #000;
						line-height: 30rpx;
						text-align: center;
						font-weight: 700;
						margin-bottom: 15rpx;
					}
				}

				.attr-box {
					background-color: rgba(0, 0, 0, .5);
					width: 100%;
					box-sizing: border-box;
					padding: 0 15rpx;
					padding-bottom: 10rpx;
					padding-top: 10rpx;

					.attr-row {
						height: 40rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						font-size: 20rpx;
						color: #fff;
						border-bottom: 2rpx solid #fff;

						&:last-child {
							border: none;
						}

						.left-attr-name,
						.right-atrr-value {
							margin-bottom: 5rpx;
							height: 30rpx;
							line-height: 30rpx;
						}

					}
				}
			}



		}

		.girl-name-start {
			position: absolute;
			top: 220rpx;
			left: 40rpx;
			width: 100rpx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			z-index: 9;

			.girl-name {
				position: relative;
				width: 40rpx;
				font-size: 24rpx;
				color: #fff;
				// background-color: rgba(0, 0, 0, .3);
				background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .3)20%, rgba(0, 0, 0, .3)100%);
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				text-align: center;
				box-sizing: border-box;
				padding: 45rpx 0rpx;
				padding-top: 45rpx;
				// margin-top: 60rpx;
				line-height: 30rpx;
				min-height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.icon-box {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 2rpx;
					width: 36rpx;
					height: 36rpx;
					background-color: hotpink;
					border-radius: 50%;
					color: #fff;
					font-size: 18rpx;
					line-height: 36rpx;

				}

				.choosed-box {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -45rpx;
					width: 80rpx;
					height: 30rpx;
					background-color: #69a8db;
					color: #fff;
					font-size: 20rpx;
					line-height: 30rpx;

				}

				.top-name {
					width: 100%;
				}

				.center-split-icon {
					width: 100%;
				}

				.bottom-clothes-name {
					width: 100%;
				}

				.r-level {
					position: absolute;
					left: 50%;
					top: 0;
					width: 74rpx;
					height: 45rpx;
					display: block;
					transform: translate(-50%, -25%);
					overflow: hidden;

					.r-level-icon {
						width: 100rpx;
						height: 45rpx;
					}
				}

				.r-ssr {
					width: 74rpx;
				}

				.r-sr-sp {
					width: 55rpx;
				}

				.r-r {
					width: 38rpx;
				}
			}

			.girl-start {
				width: 50rpx;
				height: 200rpx;
				margin-left: 5rpx;

				margin-top: 18rpx;

				.start-item {
					width: 35rpx;
					height: 35rpx;
					margin-bottom: 10rpx;

					.start-img {
						width: 100%;
						height: 100%;
					}

				}
			}
		}

		.power-box {
			position: absolute;
			left: 0rpx;
			bottom: 250rpx;
			width: 100%;
			height: 40rpx;
			z-index: 9;

			.power-inner {
				position: relative;
				width: 300rpx;
				height: 100%;
				// background-image: linear-gradient(to right, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .3)10%, rgba(0, 0, 0, .5)20%, rgba(0, 0, 0, .5)80%, rgba(0, 0, 0, .3)90%, rgba(0, 0, 0, 0)100%);
				background-image: linear-gradient(to right, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .5)30%, rgba(0, 0, 0, .5)70%, rgba(0, 0, 0, 0)100%);
				display: flex;
				justify-content: center;
				align-items: center;

				// font-weight: 700;
				.line-box {
					position: absolute;
					left: 0rpx;
					width: 100%;
					height: 1rpx;
					// background-color: rgba(255, 255, 255, .6);
					background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 100%);
					opacity: 0.4;
				}

				.top-line {
					top: 0rpx;
				}

				.bottom-line {
					bottom: 0rpx;
				}




				.left-tip {
					display: flex;
					justify-content: flex-start;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #f3e9b4;
					margin-right: 10rpx;
					height: 28rpx;
					font-weight: 700;


					.one-tip {

						align-self: flex-start;
					}

					.two-tip {

						align-self: flex-end;
					}


				}

				.right-num {
					font-size: 24rpx;
					line-height: 40rpx;
					color: #fff;
				}
			}

		}

		.attr-update-btn {
			position: absolute;
			left: 0rpx;
			bottom: 100rpx;
			box-sizing: border-box;
			width: 100%;
			padding: 0 60rpx;

			z-index: 9;

			.btn-content {
				flex: 1;
				height: 65rpx;
				// background-color: #fcd37b;
				background-image: linear-gradient(to right, #f3f1c6, #efcf80);
				color: #b27439;
				// color: #000;
				border-radius: 8rpx;
				box-sizing: border-box;

				margin-right: 20rpx;

				&:last-child {
					margin-right: 0rpx;
				}

				.btn-top-name {
					font-size: 24rpx;
					font-weight: 700;
					line-height: 24rpx;
					text-align: center;
				}


			}

			.two {
				background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
				color: #646369;
			}

		}
	}
</style>